<template>
  <div class="container">
    <div class="header" @click="$router.back(-1)">
      <i class="el-icon-arrow-left c-font-b"></i>
      <span>菜谱编辑</span>
    </div>
    <!--    表单区域-->
    <div class="menu-form">
      <el-form :model="menuDetail">
        <el-form-item label="食堂" prop="canteen">
          <el-select
            v-model="menuDetail.canteenId"
            class="m-2"
            placeholder="请选择食堂"
            size="mini"
            style="width: 472px"
          >
            <el-option
              v-for="item in canteenData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker
            class="c-m-r-10"
            v-model="menuDetail.beginTime"
            type="date"
            size="mini"
            value-format="YYYY-MM-DD"
            placeholder="开始时间"
          >
          </el-date-picker>
          <span>—</span>
          <el-date-picker
            class="c-m-l-10"
            v-model="menuDetail.endTime"
            type="date"
            size="mini"
            value-format="YYYY-MM-DD"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述" prop="detail">
          <el-input
            style="width: 475px"
            type="textarea"
            v-model="menuDetail.description"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!--    菜谱表格区域-->
    <div class="menu-tables">
      <!--      菜谱tab栏切换-->
      <el-tabs v-model="menuActive" @tab-click="handleClick">
        <el-tab-pane
          v-for="(menu, menuIndex) in menuTabs"
          :label="menu.label"
          :name="menu.name"
          :key="menuIndex"
        >
          <!--          表格区域-->
          <!-- 基础套餐档口表格 -->
          <el-table
            v-show="menuActive === 1"
            :data="basicFood"
            style="width: 100%; height: 400px; overflow-y: auto"
            border
            :header-cell-style="{ background: '#FEF6F6' }"
          >
            <el-table-column
              align="center"
              prop="businessTime"
              label="日期"
              width="180"
            >
            </el-table-column>
            <el-table-column v-for="(item, index) in basicList" :key="item.id">
              <template #header>
                <span class="c-text-center"
                  >{{ item.name }}({{ item.num }})</span
                >
              </template>
              <template #default="scope">
                <el-tag
                  size="small"
                  closable
                  type="info"
                  @close="updateFood(scope.row.basicOptionalList1[index])"
                  style="margin: 0 5px 5px 0"
                  v-for="i in scope.row.basicOptionalList1[index]"
                  :key="i.id"
                  >{{ i.foodName }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 碗碗菜档口表格 -->
          <el-table
            v-show="menuActive === 2"
            :data="basicFood"
            style="width: 100%; height: 400px; overflow-y: auto"
            border
            :header-cell-style="{ background: '#FEF6F6' }"
          >
            <el-table-column
              align="center"
              prop="businessTime"
              label="日期"
              width="180"
            >
            </el-table-column>
            <el-table-column v-for="item in bowPrice" :key="item.id">
              <template #header>
                <span class="c-text-center">{{ item.price }}元</span>
              </template>
              <template #default="scope">
                <el-tag
                  size="small"
                  type="info"
                  closable
                  style="margin: 0 5px 5px 0"
                  v-for="blow in scope.row.bowlsList[item.price]"
                  :key="blow.id"
                  >{{ blow.foodName }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 自选称菜档口表格 -->
          <el-table
            v-show="menuActive === 3"
            :data="basicFood"
            style="width: 100%; height: 400px; overflow-y: auto"
            border
            :header-cell-style="{ background: '#FEF6F6' }"
          >
            <el-table-column
              align="center"
              prop="businessTime"
              label="日期"
              width="180"
            >
            </el-table-column>
            <el-table-column v-for="(item, index) in basicList" :key="item.id">
              <template #header>
                <span class="c-text-center"
                  >{{ item.name }}({{ item.num }})</span
                >
              </template>
              <template #default="scope">
                <el-tag
                  size="small"
                  closable
                  type="info"
                  style="margin: 0 5px 5px 0"
                  v-for="i in scope.row.basicOptionalList2[index]"
                  :key="i.id"
                  >{{ i.foodName }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    按钮区域-->
    <div class="menu-btn">
      <el-button type="primary" size="mini">保存</el-button>
      <TsButton
        perms="food-week:submit:put"
        type="primary"
        size="mini"
        @click="submit"
        label="提交"
      ></TsButton>
      <el-button size="mini" @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  foodWeek,
  getCanteenList,
  getBlowsPrice,
  foodWeekSubmit,
} from "../../../api/canteen/menu-managerApi";

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    //菜谱详情
    const menuDetail = ref({});
    //菜谱id
    const menuId = ref("");
    //食堂数据
    const canteenData = ref([]);
    //当前选中tab
    const menuActive = ref(1);
    //tab栏数据
    const menuTabs = ref([
      {
        label: "基础套餐档口",
        name: 1,
      },
      {
        label: "碗碗菜档口",
        name: 2,
      },
      {
        label: "自选称菜档口",
        name: 3,
      },
    ]);
    //
    //tab切换
    function handleClick() {}
    // 碗碗菜价格头部数据
    const priceList = ref([]);
    // 根据id查询菜谱信息
    function getFoodWeek() {
      foodWeek(menuId.value).then((res) => {
        menuDetail.value = res.data.week;
        foodWeekData.basicFood = res.data.weekday;
        foodWeekData.basicList = res.data.JCList;
        foodWeekData.bowPrice = res.data.bowPrice;
      });
    }
    // 获取碗碗菜价格
    function blowsPrice() {
      getBlowsPrice().then((res) => {
        priceList.value = res.data;
      });
    }
    // 获取食堂列表
    function getCanteenData() {
      getCanteenList().then((res) => {
        canteenData.value = res.data;
      });
    }
    // 周菜谱数据
    const foodWeekData = reactive({
      // 基础套餐档口数据
      basicFood: ref([]),
      // 基础套餐头部数据
      basicList: ref([]),
      // 碗碗菜头部数据
      bowPrice: ref([]),
      // 荤菜数据
      huncaiList: ref([]),
    });
    // 取消操作
    function cancel() {
      router.back();
    }
    // 提交审核按钮
    function submit() {
      const ids = [];
      ids.push(menuId.value);
      foodWeekSubmit(ids).then((res) => {
        if (res.code === 200) {
          ElMessage.success("提交成功");
          router.back();
        }
      });
    }
    // 菜品更新
    function updateFood(item) {
      console.log(item);
    }
    // 跳转到编辑页面
    function menuAdd() {}
    onMounted(() => {
      menuId.value = route.query.id;
      getFoodWeek();
      getCanteenData();
      blowsPrice();
    });
    return {
      canteenData,
      menuDetail,
      menuTabs,
      menuActive,
      cancel,
      handleClick,
      priceList,
      submit,
      ...toRefs(foodWeekData),
      updateFood,
      menuAdd,
    };
  },
};
</script>
<style scoped lang="scss">
/deep/.el-form-item__label {
  color: #666666;
}
/deep/ .el-table th {
  text-align: center !important;
}
.container {
  .header {
    border-bottom: 1px solid #edeff3;
    padding-bottom: 20px;
  }
  .menu-form {
    margin: 20px 0;
  }
  .menu-btn {
    margin: 20px 0;
  }
}
</style>
